<template>
  <div class="textbox">
    <div> 10公里平均海拔： {{ resultData1  }} </div>
    <div> 设防烈度：{{ defense }} </div>
    <div> 震中所在乡镇：{{ townVillage }} </div>
  </div>
</template>  
  
<script setup>
import { ref, defineProps, defineEmits } from 'vue'
import { useMapStoreStore } from '../../../stores/index'
import { getearthQuakeOverview } from '../../../api/topic'
const store = useMapStoreStore()

const townVillage = ref('')
var resultData1 = ref('')
const defense = ref('')
getearthQuakeOverview({ earthquakeid: store.eqid + '' }).then((e) => {
  resultData1.value = e[0]?.elevation ||  e[0]?.elevation  === 0 ? e[0]?.elevation + '米' : '暂无数据'
  townVillage.value = e[0]?.quake_town || '暂无数据'
  defense.value = e[0]?.defense ? e[0].defense + '度' : '暂无数据'
})
</script>  
  
<style lang="scss" scoped>
.textbox {
  height: 100%;
  overflow: auto;
  font-size: 20px;
  line-height: 30px;
  // 滚动条整体部分
  &::-webkit-scrollbar {
    width: 6px;
    height: 8px;
  }
  &::-webkit-scrollbar-button {
    display: none;
  }
  &::-webkit-scrollbar-thumb {
    background: #01c2ff;
    cursor: pointer;
    border-radius: 4px;
  }
  &::-webkit-scrollbar-corner {
    display: none;
  }
  &::-webkit-resizer {
    display: none;
  }
  div {
    margin-bottom: 8px;
  }
  div:last-child {
    margin-bottom: 0;
  }
}
</style>